<template>
  <div class="login">
    <el-row>
      <el-col :span="12" class="hidden-xs-only"></el-col>
      <el-col :span="12">
        <el-form
          class="form"
          :model="accountForm"
          label-position="top"
          :rules="rules"
          ref="ruleFormRef"
        >
          <h1>后台管理系统</h1>
          <el-form-item prop="username">
            <el-input v-model="accountForm.username" />
            <template #label>
              <p>用户名</p>
            </template>
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password v-model="accountForm.password" />
            <template #label>
              <p>密码</p>
            </template>
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-form-item>

          <div class="pwd-info">
            <el-checkbox v-model="ispwd" label="记住密码" size="large" />
            <el-text class="mx-1" type="info">注册账号</el-text>
          </div>
          <el-button
            type="primary"
            size="large"
            class="loginBtn"
            :loading="loading"
            @click="handleAccountClick(ruleFormRef)"
            >登录</el-button
          >

          <div class="concat">
            <svg class="icon iconlogin" aria-hidden="true">
              <use xlink:href="#icon-QQ"></use>
            </svg>
            <svg class="icon iconlogin" aria-hidden="true">
              <use xlink:href="#icon-weixin"></use>
            </svg>
            <svg class="icon iconlogin" aria-hidden="true">
              <use xlink:href="#icon-GitHub"></use>
            </svg>
            <svg class="icon iconlogin" aria-hidden="true">
              <use xlink:href="#icon-gitee"></use>
            </svg>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useLoginStore } from '@/stores/login'
import { getHouse } from '@/utils/timeHouse'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
const loginStore = useLoginStore()

const ispwd = ref(true)

const loading = ref(false)

const ruleFormRef = ref<FormInstance>()
const accountForm = reactive({
  username: 'xiaoluo',
  password: '123456'
})
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 12, message: '长度必须是3-12位', trigger: 'blur' }
  ],
  password: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change'
    }
  ]
})

const router = useRouter()
const route = useRoute()
const handleAccountClick = (ruleFormRef: FormInstance | undefined) => {
  loading.value = true
  if (!ruleFormRef) return
  ruleFormRef.validate(async (valid: any) => {
    if (valid) {
      const result = await loginStore.accountLoginAction({
        username: accountForm.username,
        password: accountForm.password
      })
      if (result) {
        loading.value = false
        getHouse()
        const redirect: any = route.query.redirect
        router.push(redirect || '/home')
      } else {
        loading.value = false
        ElMessage.error('用户名或密码错误！')
      }
    } else {
      loading.value = false
    }
  })
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: rgb(42, 105, 222) url(../../assets/img/bgc.png) no-repeat 20%;
}

.form {
  position: relative;
  top: 15vh;
  left: 100px;
  width: 300px;
  height: 500px;
  background-color: #fff;
  padding: 0 50px;
  overflow: hidden;
  h1 {
    text-align: center;
    margin-top: 20px;
  }

  .pwd-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .loginBtn {
    width: 100%;
    margin-top: 20px;
  }

  .concat {
    display: flex;
    justify-content: space-around;
    .iconlogin {
      font-size: 20px;
      width: 40px;
      cursor: pointer;
    }
  }
}
</style>
